import { Table, Pagination } from 'antd';
import React, { useState, useEffect } from 'react';
import { getCompensationCount, getApplyRecordInfo } from '../service';
import { useRequest } from '@umijs/hooks';
import IndemnityCountTable from '../components/IndemnityCountTable';
import ClaimsRecord from '../components/ClaimsRecord';
import style from './PassengerListTable/styles.less';

// 过滤证件类型
const flilterIDtype = v => {
  if (v === 'NI') {
    return <span>身份证</span>;
  } else if (v === 'PP' || v === 'PSPT') {
    return <span>护照</span>;
  } else {
    return <span>其他</span>;
  }
};
const filterPayStatus = v => {
  if (v === '0') {
    return <span>未支付</span>;
  } else if (v === '1') {
    return <span>支付成功</span>;
  } else if (v === '2') {
    return <span>支付失败</span>;
  } else {
    return <span>未支付</span>;
  }
};
const TableForm = props => {
  const {
    data,
    editInfo,
    type,
    total,
    pageSize,
    current,
    handleCurrent,
    setTableLoading,
    tableLoading,
    handlePageSize,
    orderId,
  } = props;
  // 获取申领记录弹框数据
  const { data: claimsData, run: claimsFun } = useRequest(params => getApplyRecordInfo(params),{manual:true});
  // 申领记录显示
  const [claimsVisible, setClaimsVisible] = useState(false);
  // 点击的旅客信息储存
  const [passengerTitle, setPassengerTitle] = useState('');

  // 获取补偿次数表格数据
  const { data: countData, run } = useRequest(params => getCompensationCount(params),{manual:true});
  // 补偿次数表格显示
  const [createModalVisible, handleModalCount] = useState(false);
  // 点击的旅客姓名储存
  const [passengerName, handlePassengerName] = useState('');
  // 请求数据的loading
  const [loading, setLoading] = useState(tableLoading);

  // 打开申领记录弹框
  const openClaimsRecord = (applyCount, record) => {
    if (applyCount === '0') {
    	return false;
    }
    setClaimsVisible(true);
    setPassengerTitle(`${record.flightNum}航班${record.psgName}（${record.isChild === 'Y' ? '儿童' : '成人'}${ record.withBaby === 'Y' ? '(携带婴儿)' : ''}）`);
    claimsFun({
      orderId,
      paxId: record.idx,
    });
  };

  useEffect(() => {
    setLoading(tableLoading);
  }, [tableLoading])

  // 打开总补偿次数
  const openCountModal = (payCount, record) => {
    if (payCount === '0') {
      return false;
    }
    handleModalCount(true);
    handlePassengerName(record.psgName);
    run({
      flightNo: record.flightNo || record.flightNum,
      flightDate: record.flightDate,
      paxId: record.idx,
    });
  };

  const [columns, handleColumns] = useState([]);

  useEffect(() => {
    if (type === 'examine') {
      handleColumns([
        {
          title: '姓名',
          dataIndex: 'psgName',
          fixed: 'left',
          align: 'center',
          width: 120,
          render: (text, record) => {
            return (
              <div>
                <span style={{ verticalAlign: 'middle' }}>{text}</span>
                {record.withBaby === 'Y' ? (
                  <img
                    alt=""
                    style={{ verticalAlign: 'middle' }}
                    src={require('./images/icon-test.svg')}
                  />
                ) : null}
                {record.isChild === 'Y' ? (
                  <img
                    alt=""
                    style={{ verticalAlign: 'middle' }}
                    src={require('./images/ertong.svg')}
                  />
                ) : null}
              </div>
            );
          },
        },
        {
          title: '领取状态',
          dataIndex: 'receiveStatus',
          fixed: 'left',
          align: 'center',
          width: 100,
          render: text => {
            if (text === '0') {
              return <span>未领取</span>;
            } else if (text === '1') {
              return <span>已领取</span>;
            } else if (text === '2') {
              return <span>领取中</span>;
            }
          },
        },
        {
          title: '申领记录',
          dataIndex: 'applyCount',
          fixed: 'left',
          align: 'center',
          width: 80,
          render: (applyCount, record) => (
            <span
              style={{ textDecoration: 'underline' }}
              onClick={() => {
                openClaimsRecord(applyCount, record);
              }}
              className={applyCount !== '0' ? style.count : ''}
            >
              {applyCount}
            </span>
          )
        },
        {
          title: '本单补偿金额',
          dataIndex: 'currentAmount',
          fixed: 'left',
          align: 'center',
          width: 120,
        },
        {
          title: '总补偿次数',
          dataIndex: 'payCount',
          align: 'center',
          width: 100,
          render: (payCount, record) => (
            <span
              style={{ textDecoration: 'underline' }}
              onClick={() => {
                openCountModal(payCount, record);
              }}
              className={payCount !== '0' ? style.count : ''}
            >
              {payCount}
            </span>
          )
        },
        {
          title: '总补偿金额',
          dataIndex: 'payMoney',
          align: 'center',
          width: 100,
        },
        {
          title: '支付状态',
          dataIndex: 'payStatus',
          align: 'center',
          width: 120,
          render: text => {
            return filterPayStatus(text);
          },
        },
        {
          title: '支付失败原因',
          dataIndex: 'payFailInfo',
          align: 'center',
          width: 180,
          render:text=>{
            return text === "您申领的补偿中，存在补偿单已关闭，请重新申请" ? "" : text;
          }
        },
        {
          title: '是否冻结',
          dataIndex: 'switchOff',
          align: 'center',
          width: 100,
          render: text => {
            if (text === '0') {
              return <span>未冻结</span>;
            } else {
              return <span>已冻结</span>;
            }
          },
        },
        {
          title: '证件类型',
          dataIndex: 'idType',
          align: 'center',
          width: 100,
          render: text => {
            return flilterIDtype(text);
          },
        },
        {
          title: '证件号',
          dataIndex: 'idNum',
          align: 'center',
          width: 180,
        },
        {
          title: '旅客手机号',
          ellipsis: true,
          dataIndex: 'phone',
          align: 'center',
          width: 120,
        },
        {
          title: '航段',
          dataIndex: 'segment',
          align: 'center',
          width: 120,
        },
        {
          title: '主舱位',
          dataIndex: 'mainClass',
          align: 'center',
          width: 100,
        },
        {
          title: '子舱位',
          dataIndex: 'subClass',
          align: 'center',
          width: 100,
        },
        {
          title: '票号',
          dataIndex: 'etNum',
          align: 'center',
          width: 150,
        },
        {
          title: 'PNR',
          dataIndex: 'pnrRef',
          align: 'center',
          width: 120,
        },
        {
          title: '值机状态',
          dataIndex: 'status',
          align: 'center',
          width: 130,
          render: (status) => (
            <>
              <span style={{ display: status === 'PT' ? 'block' : 'none' }}>PT（出票）</span>
              <span style={{ display: status === 'NA' ? 'block' : 'none' }}>NA（未值机）</span>
              <span style={{ display: status === 'AC' ? 'block' : 'none' }}>AC（值机）</span>
              <span style={{ display: status === 'XR' ? 'block' : 'none' }}>XR（值机取消）</span>
              <span style={{ display: status === 'CL' ? 'block' : 'none' }}>CL（订座取消）</span>
              <span style={{ display: status === 'SB' ? 'block' : 'none' }}>SB（候补）</span>
              <span style={{ display: status === 'DL' ? 'block' : 'none' }}>DL（拉下）</span>
            </>
          )
        },
        {
          title: '购票时间',
          dataIndex: 'printTicketTime',
          align: 'center',
          width: 160,
        },
      ]);
    } else {
      handleColumns([
        {
          title: '姓名',
          dataIndex: 'psgName',
          fixed: 'left',
          align: 'center',
          width: 150,
          render: (text, record) => {
            return (
              <div>
                <span style={{ verticalAlign: 'middle' }}>{text}</span>
                {record.withBaby === 'Y' ? (
                  <img
                    alt=""
                    style={{ verticalAlign: 'middle' }}
                    src={require('./images/icon-test.svg')}
                  />
                ) : null}
                {record.isChild === 'Y' ? (
                  <img
                    alt=""
                    style={{ verticalAlign: 'middle' }}
                    src={require('./images/ertong.svg')}
                  />
                ) : null}
              </div>
            );
          },
        },
        {
          title: '申领记录',
          dataIndex: 'applyCount',
          fixed: 'left',
          align: 'center',
          width: 80,
          render: (applyCount, record) => (
            <span
              style={{ textDecoration: 'underline' }}
              onClick={() => {
                openClaimsRecord(applyCount, record);
              }}
              className={applyCount !== '0' ? style.count : ''}
            >
              {applyCount}
            </span>
          )
        },
        {
          title: '总补偿次数',
          dataIndex: 'payCount',
          fixed: 'left',
          align: 'center',
          width: 100,
          render: (payCount, record) => (
            <span
              style={{ textDecoration: 'underline' }}
              onClick={() => {
                openCountModal(payCount, record);
              }}
              className={payCount !== '0' ? style.count : ''}
            >
              {payCount}
            </span>
          )
        },
        {
          title: '总补偿金额',
          dataIndex: 'payMoney',
          fixed: 'left',
          align: 'center',
          width: 100,
        },
        {
          title: '支付状态',
          dataIndex: 'payStatus',
          align: 'center',
          width: 120,
        },
        {
          title: '支付失败原因',
          dataIndex: 'payFailInfo',
          align: 'center',
          width: 180,
          render:text=>{
            return text === "您申领的补偿中，存在补偿单已关闭，请重新申请" ? "" : text;
          }
        },
        {
          title: '证件类型',
          dataIndex: 'idType',
          align: 'center',
          width: 100,
          render: text => {
            return flilterIDtype(text);
          },
        },
        {
          title: '证件号',
          dataIndex: 'idNum',
          align: 'center',
          width: 180,
        },
        {
          title: '旅客手机号',
          ellipsis: true,
          dataIndex: 'phone',
          align: 'center',
          width: 120,
        },
        {
          title: '航段',
          dataIndex: 'segment',
          align: 'center',
          width: 120,
        },
        {
          title: '主舱位',
          dataIndex: 'mainClass',
          align: 'center',
          width: 100,
        },
        {
          title: '子舱位',
          dataIndex: 'subClass',
          align: 'center',
          width: 100,
        },
        {
          title: '票号',
          dataIndex: 'etNum',
          align: 'center',
          width: 150,
        },
        {
          title: 'PNR',
          dataIndex: 'pnrRef',
          align: 'center',
          width: 120,
        },
        {
          title: '值机状态',
          dataIndex: 'status',
          align: 'center',
          width: 130,
          render: (status) => (
            <>
              <span style={{ display: status === 'PT' ? 'block' : 'none' }}>PT（出票）</span>
              <span style={{ display: status === 'NA' ? 'block' : 'none' }}>NA（未值机）</span>
              <span style={{ display: status === 'AC' ? 'block' : 'none' }}>AC（值机）</span>
              <span style={{ display: status === 'XR' ? 'block' : 'none' }}>XR（值机取消）</span>
              <span style={{ display: status === 'CL' ? 'block' : 'none' }}>CL（订座取消）</span>
              <span style={{ display: status === 'SB' ? 'block' : 'none' }}>SB（候补）</span>
              <span style={{ display: status === 'DL' ? 'block' : 'none' }}>DL（拉下）</span>
            </>
          )
        },
        {
          title: '购票时间',
          dataIndex: 'printTicketTime',
          align: 'center',
          width: 160,
        },
      ]);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [type]);

  return (
    <>
      {/* 申领记录 */}
      <ClaimsRecord {...{ claimsData, setClaimsVisible, claimsVisible, passengerTitle }} />
      {/* 补偿单管理 */}
      <IndemnityCountTable
        {...{ countData, handleModalCount, createModalVisible, passengerName }}
      />

      <Table
        columns={columns}
        dataSource={data}
        loading={loading}
        scroll={{ y: 400, x: 900 }}
        rowKey="idx"
        // pagination={false}
        pagination={{
          showSizeChanger: true,
          showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 项`,
          total:total,
          current,
          onChange: (page) =>{
            handleCurrent(page)
          },
          onShowSizeChange: (current, size) =>{
            handleCurrent(1);
          }
        }}
        
        size="small"
      />
      {/* {type === 'examine' || editInfo? <Pagination total={total}
      showTotal={(total, range) => `${range[0]}-${range[1]} 共 ${total} 项`} pageSize={pageSize} current={current} 
      onChange={page => {
        console.log('page :>> ', page);
        setTableLoading(true)
        handleCurrent(page)
      }} 
      size="small"
      showSizeChanger 
      onShowSizeChange={(current, size) => {
        handleCurrent(1);
        setTableLoading(true)
        handlePageSize(size)
      }} />:null} */}
    </>
  );
};

export default TableForm;
